<?xml version='1.0' encoding='UTF-8' ?>
<f:view xmlns="http://www.w3.org/1999/xhtml" 
        xmlns:f="http://java.sun.com/jsf/core"
        xmlns:h="http://java.sun.com/jsf/html"
        xmlns:ui="http://java.sun.com/jsf/facelets"
        xmlns:p="http://primefaces.org/ui"
        xmlns:pm="http://primefaces.org/mobile"
        contentType="text/html">
    
    <pm:page title="BICE" >
        <f:facet name="postinit">
            <script type="text/javascript">
                jQuery(document).ready(function(){
                    //Home Page icon
                    //jQuery('head').append('<link rel="apple-touch-icon" href="images/logo.jpg"/>');
                    //Splash screen for iPhone
                    //jQuery('head').append('<link rel="apple-touch-startup-image" href="resources/mail.png"/>');
                    //This will hide the browser address bar
                    jQuery('head').append('<meta name="apple-mobile-web-app-capable" content="yes" />');
                    jQuery('head').append('<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"/>');
                    //Adds a custom style sheet
                    jQuery('head').append('<link href="resources/style.css" rel="stylesheet" type="text/css"/>');
                    //jQuery('head').append('<link rel="icon" href="resources/images/mytv.ico" />');
                });
            </script>
        </f:facet>
        
        <pm:view id="mainView">
            <pm:header title="BICE" />
            <pm:content>
                <h:form id="formMain">
                    <h:panelGroup rendered="#{not sessionBean.logged}">
                        <h:outputLabel for="nickName" value="#{lang.user}"/>
                        <h:inputText id="nickName" value="#{indexBean.nickName}" />
                        <p:watermark for="nickName" value="#{lang.user}"/>

                        <h:outputLabel for="password" value="#{lang.password}"/>
                        <h:inputSecret id="password" value="#{indexBean.password}" />
                        <p:watermark for="password" value="#{lang.password}"/>

                        <p:separator />
                        <h:outputText value="#{lang.loginError}" rendered="#{indexBean.errorLogin}" style="color: red;font-weight: bold;"/>
                        <p:separator rendered="#{indexBean.errorLogin}"/>

                        <pm:buttonGroup orientation="horizontal">
                            <p:button value="#{lang.register}" icon="add" href="#{indexBean.rootPath}/register.xhtml"/>
                            <p:commandButton value="#{lang.login}" icon="user" ajax="false" actionListener="#{indexBean.login}"/>
                        </pm:buttonGroup>
                    </h:panelGroup>
                    <h:panelGroup rendered="#{sessionBean.logged}">
                        <h:panelGrid columns="2">
                            <h:outputText value="#{lang.nickName}" style="font-weight: bold;"/>
                            <h:outputText value="#{sessionBean.user.nickname}"/>
                        </h:panelGrid>
                        
                        <p:separator/>
                        
                        <pm:buttonGroup orientation="vertical">
                            <p:button value="#{lang.community}" href="#{indexBean.rootPath}/community.xhtml"/>
                        </pm:buttonGroup>
                        
                        <p:separator/>
                        
                        <pm:buttonGroup orientation="vertical">
                            <p:commandButton value="#{lang.exit}" ajax="false" actionListener="#{sessionBean.logOff()}"/>
                        </pm:buttonGroup>
                    </h:panelGroup>
                </h:form>
            </pm:content>
        </pm:view>

    </pm:page>
</f:view>